<template>
  <div>
    <div class="content_top">
      <div
        v-for="(e, index) in PublicColumnData"
        :key="e.title"
        :class="
          e.type === 0
            ? 'c_t_one'
            : e.type === 1
            ? 'c_t_two'
            : e.type === 2
            ? 'c_t_three'
            : ''
        "
      >
        <div class="info">
          <p>{{ e.num }}</p>
          <p :style="e.text?{height:'22px',lineHeight:'22px'}:{}">{{ e.title }}</p>
          <p :style="e.text?{height:'22px',lineHeight:'22px'}:{}">{{ e.text }}</p>
        </div>
        <div v-if="index !== 2" :class="e.text ? 'highXian' : 'xian'"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PublicColumn",
  props: {
    PublicColumnData: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.content_top{
    background-color #fff
    border-radius 5px
    line-height 30px
    display flex
    justify-content space-around
    text-align center
    align-items: center;
    color #666666
    font-size 14px
    margin-top 10px
    .c_t_one,.c_t_two,.c_t_three{
      display flex
      width 30%
    }
    .info{
      flex 1
      padding-bottom:5px
    }
    .xian{
        height 35px
        width 2px
        background-color #f5f5f5
        margin-top 15px
    }
    .highXian{
      height 35px
      width 2px
      background-color #f5f5f5
      margin-top 25px
    }
    .c_t_one p:nth-child(1){
        color #F95425
        font-size 17px
    }
    .c_t_two p:nth-child(1){
        color #198AFF
        font-size 17px
    }
    .c_t_three p:nth-child(1){
        color #2FE75A
        font-size 17px
    }
}
</style>
